<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
    img标签:指定一张图片
    图片属于行级标签，不会自动换行
    但是当图片无法再统一展示之后会自动换行
    src:指定图片的地址
        其值可以是互联网上的某一个图片的路径
        也可以是当前项目下的某一个路径
    alt:当指定的图片不存在时,显示alt属性所指定的文本内容
    title:图片的标题
        当鼠标悬停在图片上时显示的文本内容
    width:指定图片的宽度
        当单独指定了宽度之后,其高度会自动成比例进行变化
    height:指定图片的高度
        当单独指定了高度之后,其宽度会自动成比例变化
    如果同时指定宽度与高度,则不会成比例变化
    而是根据指定的值进行变化,但是此时图片会变形
    只要图片指定了宽度或者高度之后,其值与原始图片不一致的话,图片会变的模糊
    因此,实际开发中我们需要指定高度与宽度的图片时,需要由UI进行设计,交给开发人员
    开发中一般不会刻意指定图片的宽度与高度
-->
<!--<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F0Q91Q50307%2F1PQ9150307-8.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651047626&t=48e1c8efc50d29131ab41c808d604226" alt="">-->
<img src="heihei.gif" alt="">
<!--<img src="../images/3.jpg" alt="">-->
<img src="../images/heihei.gif" alt="">
<img src="../images/1.jpg" alt="图片加载失败">
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好"/>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好" width="200px"/>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好" height="200px"/>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好" width="400px" height="200px"/>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好" width="400px" height="800px"/>
</body>
</html>